<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '编辑计划',
  },
}
</route>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

// 页面参数
const planId = ref('')

// 表单数据
const planForm = ref({
  planName: '',
  totalDays: 7,
  description: '',
  startDate: '',
  reminderEnabled: true,
  reminderTime: '20:00',
})

// 天数选项
const dayOptions = ref([
  '7天',
  '14天',
  '21天',
  '30天',
  '60天',
  '90天',
])

// 当前选中的天数索引
const dayIndex = computed(() => {
  const days = [7, 14, 21, 30, 60, 90]
  return days.indexOf(planForm.value.totalDays)
})

// 方法
function onDayChange(e: any) {
  const days = [7, 14, 21, 30, 60, 90]
  planForm.value.totalDays = days[e.detail.value]
}

function onDateChange(e: any) {
  planForm.value.startDate = e.detail.value
}

function onReminderChange(e: any) {
  planForm.value.reminderEnabled = e.detail.value
}

function onTimeChange(e: any) {
  planForm.value.reminderTime = e.detail.value
}

function savePlan() {
  // 验证表单
  if (!planForm.value.planName.trim()) {
    uni.showToast({
      title: '请输入计划名称',
      icon: 'none',
    })
    return
  }

  if (!planForm.value.startDate) {
    uni.showToast({
      title: '请选择开始日期',
      icon: 'none',
    })
    return
  }

  // 保存计划
  uni.showLoading({
    title: '保存中...',
  })

  // 模拟保存
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success',
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 1000)
}

function deletePlan() {
  uni.showModal({
    title: '确认删除',
    content: '删除后无法恢复，确定要删除这个计划吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '删除中...',
        })

        // 模拟删除
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '删除成功',
            icon: 'success',
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }, 1000)
      }
    },
  })
}

// 获取当前日期
function getCurrentDate() {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 页面加载
onLoad((options) => {
  if (options?.planId) {
    planId.value = options.planId
    // 加载计划数据
    loadPlanData(options.planId)
  }
  else {
    // 新建计划，设置默认值
    planForm.value.startDate = getCurrentDate()
  }
})

function loadPlanData(id: string) {
  // 模拟加载数据
  planForm.value = {
    planName: 'test1',
    totalDays: 12,
    description: '这是一个测试计划',
    startDate: '2024-01-01',
    reminderEnabled: true,
    reminderTime: '20:00',
  }
}
</script>

<template>
  <view class="edit-plan-container">
    <!-- 编辑表单 -->
    <view class="form-container">
      <!-- 计划名称 -->
      <view class="form-item">
        <text class="form-label">
          计划名称
        </text>
        <input
          v-model="planForm.planName"
          class="form-input"
          type="text"
          placeholder="请输入计划名称"
          maxlength="20"
        >
      </view>

      <!-- 计划天数 -->
      <view class="form-item">
        <text class="form-label">
          计划天数
        </text>
        <picker
          mode="selector"
          :range="dayOptions"
          :value="dayIndex"
          @change="onDayChange"
        >
          <view class="picker-display">
            <text class="picker-text">
              {{ planForm.totalDays }}天
            </text>
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </picker>
      </view>

      <!-- 计划描述 -->
      <view class="form-item">
        <text class="form-label">
          计划描述
        </text>
        <textarea
          v-model="planForm.description"
          class="form-textarea"
          placeholder="请输入计划描述（可选）"
          maxlength="100"
        />
      </view>

      <!-- 开始日期 -->
      <view class="form-item">
        <text class="form-label">
          开始日期
        </text>
        <picker
          mode="date"
          :value="planForm.startDate"
          @change="onDateChange"
        >
          <view class="picker-display">
            <text class="picker-text">
              {{ planForm.startDate }}
            </text>
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </picker>
      </view>

      <!-- 提醒设置 -->
      <view class="form-item">
        <text class="form-label">
          每日提醒
        </text>
        <switch
          :checked="planForm.reminderEnabled"
          color="#007AFF"
          @change="onReminderChange"
        />
      </view>

      <!-- 提醒时间 -->
      <view v-if="planForm.reminderEnabled" class="form-item">
        <text class="form-label">
          提醒时间
        </text>
        <picker
          mode="time"
          :value="planForm.reminderTime"
          @change="onTimeChange"
        >
          <view class="picker-display">
            <text class="picker-text">
              {{ planForm.reminderTime }}
            </text>
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </picker>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="save-btn" @click="savePlan">
        保存计划
      </button>
      <button class="delete-btn" @click="deletePlan">
        删除计划
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.edit-plan-container {
  min-height: 100vh;
  background-color: #f4f4f4;
}

.form-container {
  padding: 20px;
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .form-label {
    font-size: 16px;
    color: #333;
    min-width: 80px;
  }

  .form-input {
    flex: 1;
    text-align: right;
    font-size: 16px;
    color: #333;
    margin-left: 15px;
  }

  .form-textarea {
    flex: 1;
    min-height: 60px;
    text-align: right;
    font-size: 16px;
    color: #333;
    margin-left: 15px;
  }

  .picker-display {
    display: flex;
    align-items: center;
    gap: 8px;

    .picker-text {
      font-size: 16px;
      color: #333;
    }
  }
}

.action-section {
  padding: 40px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .save-btn {
    width: 100%;
    height: 44px;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;

    &:active {
      background-color: #0056cc;
    }
  }

  .delete-btn {
    width: 100%;
    height: 44px;
    background-color: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;

    &:active {
      background-color: #d9363e;
    }
  }
}
</style>
